<!DOCTYPE HTML>
<html lang="no">

<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>


<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script>

<script type="text/javascript" src="js/modernizr.js"></script>

<script type="text/javascript" src="js/propertystore.js"></script>
<script type="text/javascript" src="js/pagecolor.js"></script>
<script type="text/javascript" src="js/parkdata.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript" src="js/map.js"></script>

<style type="text/css">
/* HTML5-støtte */
header, section, footer, aside, nav, article, figure { display: block; }
a:visited {text-decoration:none;color:white;}
a:link {text-decoration:none;color:white;}
body {background-color:gray;}
</style>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>Parkeringshjelpen</title>
<script type="text/javascript">
//jQuery(document).ready(function() {
//	 initPropertyStore();
//	 showMap();
//	 
//	 updateIcons('P1,50,50;P2,10,10;P3,150,150;P4,250,250');
//	 
//	 keepMapCentered(true);
//	 google.maps.event.trigger(map, 'resize');
//});

// document ready loader
jQuery(document).ready(function() {
        // init and set of localstorage properties
        initPropertyStore();
        // Start the server communication
	 	startServerComm();
	 	// Show map
	 	showMap();
	 	
	 	// To show the parking locations...
	 	updateIcons('P1,50,50;P2,10,10;P3,150,150;P4,250,250');
	 	
	 	// Set the tag to update the stats on the front page
	 	setParkIdUpdate("oversikt");
		//setPage(1);
		keepMapCentered(true);
		initStats();
		visParkStat();
		
		// If the gps pos is checked - check it again...
		initShowPosision();
		
		// Bind functions
		$("#chkShowPosisition").bind( "change", function(event, ui) {
  			toggleGpsShow();
		});
		$("#filterFlagCheckBox").bind( "change", function(event, ui) {
  			checkboxFilterClicked();
		});
		$("#colorSelected").bind( "change", function(event, ui) {
  			changeBackgroundColor(event.currentTarget.value);
		});
	
		//alert(navigator.userAgent);
		if(navigator.userAgent.match(/Android/i)){
    		window.scrollTo(0,1);
 		} 
});

// Checkbox is checked/unchecked
function toggleGpsShow() {
	var domChk = $("#chkShowPosisition")[0];
	if(SETTINGS_enableLocation==0) {
		SETTINGS_enableLocation = 1;
	} else {
		SETTINGS_enableLocation = 0;
	}
	domChk.checked = (SETTINGS_enableLocation==1 ? true : false);
	saveProperties();
	updateGpsTimer(SETTINGS_enableLocation);
}

// Init show me choice
function initShowPosision() {
	
	var domChk = $("#chkShowPosisition")[0];
	domChk.checked = (SETTINGS_enableLocation==1 ? true : false);
	updateGpsTimer(SETTINGS_enableLocation);
}

function setPage(whichPage) {
	// Close all pages and open the seleced
	//$("[name='menupage']").hide();
	//$(".pageClass").css("display","none");
	$("#page1").css("display","none");
	$("#page2").css("display","none");
	
	var getPage = $("#page"+whichPage);
	$("#page"+whichPage).css("display","");
}

function showStats() {
	$("#page2").show();
	$("#page1").hide();
	$("#showStatistics").hide();
	$("#hideStatistics").show();
}

function hideStats() {
	$("#page1").show();
	$("#page2").hide();
	$("#hideStatistics").hide();
	$("#showStatistics").show();
}

function changeBackgroundColor(color){
	try {
		$('body').css('background-color', color);
	}
	catch (e){
		alert(e)
	}
}
</script>


</head>

<body>
<div data-role="page" style="width:100%; height:100%" id="home">
	<div data-role="header" data-position="inline">
	<h1>Parkeringshjelpen</h1>
	<a href="#settings" data-icon="arrow-r">Set</a>
	<a  href="#" onClick="javascript:centerAll();return false;" data-icon="check" class="ui-btn-right">Zoom</a>
	</div>
	
	<div data-role="content" style="padding:0; width:100%; min-height: 100%; height:300px; overflow: hidden;position: fixed;margin: 0 auto;">
		<div id="map_canvas" style="width:100%;min-height: 100%;"></div>
	</div>
	
	<div data-role="footer" style=" position: absolute;bottom: 0px;left: 0px;">
	<div data-role="navbar">
		<ul>
		<li><img id="gpsstat" src="img/gno.png">
		<span id="oversikt">Navbaren</span></li>
		</ul>
	</div>
	</div>
	
</div>

<div data-role="page" style="width:100%; height:100%" id="settings">
	<div data-role="header" data-position="inline">
	<a href="#home" data-icon="arrow-l">Back</a>
	<h1>Parkeringshjelpen</h1>
	</div>

	<div id="settingsPane">
	
		
		<input type="color" id="colorSelected" onchange="changeBackgroundColor(this.value);"/>
		<label for="colorSelected">Bakgrunnsfarge</label>	
		
		<input type="checkbox" id="chkShowPosisition" onClick="javascript:toggleGpsShow();"/>
		<label for="chkShowPosisition">Vis min posisjon</label>
		<!--br/> 
		<a href="#" onClick="javascript:centerAll();return false;" >Zoom alt</a>
		<br/-->
		<input type="checkbox" id="filterFlagCheckBox" onClick="javascript:checkboxFilterClicked();"/>
		<label for="filterFlagCheckBox">Vis bare parkeringsplasser som har flere ledige plasser</label>

		<div id="filterSlider" style="display:none">
		Minimum antall ledige parkeringsplasser: <span id="parkIconFilterValue">25</span> Endre:<input type="range" min="0" max="50" value="25" onchange="updateParkIconFilterValue(this.value)"/>
		</div>
		
		<!-- http://jquerymobile.com/test/docs/forms/switch/ -->
		<label for="flip-a">Select slider:</label>
		<select name="slider" id="flip-a" data-role="slider">
			<option value="off">Off</option>
			<option value="on">On</option>
		</select> 

	</div>
	
	<div data-role="footer" style=" position: absolute;bottom: 0px;left: 0px;">
	<div data-role="navbar">
		<ul>
		<li>Navbaren</li>
		</ul>
		<a href="#statistikk" data-icon="check">Statistikk</a>
	</div>
	</div>
</div>

<div data-role="page" style="width:100%; height:100%" id="statistikk">
	<div data-role="header" data-position="inline">
	<a href="#home" data-icon="arrow-l">Back</a>
	<h1>Parkeringshjelpen</h1>
	</div>
	
	
	&nbsp;Prosentvis ledig kapasitet siden du startet. 
	<input type="button" class="button buttonRefresh" value="Oppdater" onClick="javascript:visParkStat();return false"/>
<div id="parkInfo"></div>
<canvas id="stats" class="stats" width="400" height="400"></canvas>
<br/>
Sett av/på :
<span id="parkStatToggles"></span>
<label id="debug2"></label>


</div>

<!--  gremlin.stud.aitel.hist.no -->
</body>
</html>